<template lang="pug">
  .zgplugin-select.zgplugin-empty(v-if="(!exist || !show)&&editor")
    svg-icon.empty-icon(icon-class="组件下拉框")
  .zgplugin-select(v-show="show" v-else-if="exist")
    normal-select-render(v-if="!config.isFilter" :config="config" :readonlyMain="readonlyMain" :editor="editor"  :isMobile="isMobile" :scope="scope" :cancelLinkAndDefaultValue="cancelLinkAndDefaultValue" ref="normalSelect")
    filter-select-render(v-if="config.isFilter" :config="config" :editor="editor" ref="filterSelect")
</template>
<script>
import inputCommon from '../../../../mixin/inputCommon'
import normalSelectRender from './normalSelectRender'
import filterSelectRender from './filterSelectRender'

export default {
  name: 'render',
  components: { normalSelectRender, filterSelectRender },
  props: ['config', 'editor', 'readonlyMain', 'isMobile', 'scope', 'cancelLinkAndDefaultValue'],
  inject: ['rootForm'],
  mixins: [inputCommon],
  data() {
    return {
      default: this.config.selectType === 'single' ? undefined : []
    }
  },
  methods: {
    commit() {
      this.$refs.filterSelect.commit()
    },
    validate() {
      return this.$refs.normalSelect.validate()
    }
  },
  created() {
  }
}
</script>
<style lang="scss">
  .zgplugin-select {
    margin-top: 16px;
    .el-form-item {
      margin-bottom: 0 !important;
    }
    .show-options {
      line-height: 36px;
      height: 460px;
      overflow: auto;
      border-top: 1px solid transparent;
      .van-loading {
        padding: 20px;
        margin: 100px auto;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.5);
      }
    }
    .box-value {
      width: 100%;
      box-sizing: border-box;
      min-height: 34px;
      line-height: 24px;
      padding: 6px 35px 6px 15px;
      border-bottom: 1px solid #dcdfe6;
      position: relative;
      .multiple-item {
        padding: 4px 10px;
        background: #e0e0e0;
        border-radius: 38px;
        white-space: nowrap;
        display: inline-block;
        margin-top: 6px;
        margin-left: 6px;
        .multiple-item-icon {
          color: rgba(0, 0, 0, 0.54);
          margin-left: 10px;
        }
      }
      .icon {
        position: absolute;
        font-size: 18px;
        right: 2px;
        top: 13px;
        color: #999;
      }
    }
  }
</style>
